<template>
  <!-- 联动 -->
  <div class="container">
    <div class="container-top">
      <div class="back" @click="goBack"></div>
    </div>
    <div class="container-body">
      <div class="left-box">
        <div class="left-box-cont">
          <div class="left-top">
            <div class="left-top-left-cont">
              <LeftTopLeft :LeftTopLeftdata="LeftTopLeftdata" />
            </div>
            <div class="left-top-right-cont borderStyle">
              <div class="blueTitleStyle">光字牌</div>
              <LeftTopRight :gzpdata="newGzpData" />
            </div>
          </div>
          <div class="left-in borderStyle">
            <div class="blueTitleStyle" @click="goPage">油色谱（uL/L）</div>
            <Leftin />
          </div>
          <div class="left-bottom borderStyle">
            <div class="blueTitleStyle">带电检测信息</div>
            <LeftBottm />
          </div>
        </div>
        <div class="gdpf-btn">
          <el-button type="primary" @click="paidan">工单派发</el-button>
          <el-button type="primary" v-if="isBtn" @click="fqtx">发起特巡</el-button>
        </div>
      </div>
      <div class="right-box">
        <Right ref="right" />
      </div>
    </div>
    <el-dialog :visible.sync="showGdpf" title="工单派发">
      <gdpf :data="currentRow" v-if="showGdpf" @saveend="saveend" />
      <iframe class="iframe" frameborder="0"></iframe>
    </el-dialog>
    <el-dialog :visible.sync="visible" width="100%" top="5vh" :title="iframeTitle">
      <div class="iframe-container">
        <iframe
          id="iframe"
          v-if="visible"
          :src="iframeUrl"
          style="width:100%; height:100%;border:0px;border-radius:5px;"
          border="0"
          scrolling="no"
        ></iframe>
      </div>
      <iframe class="iframe" frameborder="0"></iframe>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import echarts from "echarts";
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { EChartOption } from "echarts";
import { publicAPIModule } from "@/store/modules/public";
import LeftTopLeft from "./LianDongModules/LeftTopLeft.vue";
import LeftTopRight from "./LianDongModules/LeftTopRight.vue";
import Leftin from "./LianDongModules/Leftin.vue";
import LeftBottm from "./LianDongModules/LeftBottm.vue";
import { GetSocketModule } from "@/store/modules/GetSocketData";
import Right from "./LianDongModules/Right.vue";
import gdpf from "./gdpf.vue";
import qs from "qs";

// import LeftBottm from './'
//loadsh
import lodash from "lodash";
import { filter } from "vue/types/umd";
@Component({
  components: { LeftTopLeft, LeftTopRight, Leftin, LeftBottm, Right, gdpf },
})
export default class LianDong extends Vue {
  $refs!: {
    right: Right;
  };
  //左上数据
  LeftTopLeftdata = {};
  // 返回按钮
  private goBack(val: string) {
    window.history.back();
    // this.$router.push("index");
  }

  created() {}
  private visible: boolean = false;
  iframeTitle = "";
  iframeUrl = "";
  goPage(name) {
    if (this.SBCODE === "-" || !this.SBCODE) {
      this.$message({
        type: "warning",
        message: "缺少设备编码！",
      });
      return false;
    }
    // this.iframeTitle = `${this.stationName}${this.SBMC}`;
    this.iframeTitle = `${this.stationName}油色谱`;
    this.iframeUrl = `http://10.193.23.21:28883/epribigdata/jsp/tg_zt/xinyi_jsp/solublegasinoil.jsp?deviceCode=${this.SBCODE}&bdzmc=${this.stationName}&sbmc=${this.SBMC}`;
    console.log(this.iframeUrl);
    this.visible = true;
  }
  fetch(id) {
    var params: any = {
      id: id,
    };
    // console.log(params);
    (this as any).$services
      .getLinkageParticulars({ method: "post", data: params, postparams: true })
      .then((result: any) => {
        // console.log(result.data);
        if (result.data) {
          this.LeftTopLeftdata = result.data;
          this.setVideoData(result.data);
          console.log(this.LeftTopLeftdata);
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // 设置视频播放数据
  setVideoData(data) {
    data = data || {};
    let operationVideoPosition = data.operationVideoPosition || [];
    let videoData = {
      stationId: "",
      list: [],
    };
    operationVideoPosition.forEach((v) => {
      videoData.stationId = v.stationId;
      videoData.list.push({
        indexCode: v.videoCode,
        stationId: v.stationId,
      });
    });

    let right = this.$refs.right;
    if (right) {
      right.shipinData = videoData;
    }
  }

  //光子牌
  gzpData = [];
  gzp(id) {
    var params: any = {
      deviceId: id,
    };
    (this as any).$services
      .onlineMonitorqueryLinkage({ data: params })
      .then((result: any) => {
        let data = result.data || [];
        this.gzpData = data;
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  get newGzpData() {
    let gzpData = this.gzpData;
    gzpData.map((item, index) => {
      var is = false;
      if (GetSocketModule.AllAuxiliaryByDeviceId[item.deviceId]) {
        var state = GetSocketModule.AllAuxiliaryByDeviceId[
          item.deviceId
        ].filter((item) => {
          // 非遥信和告警
          return item.remoteType !== "2" && item.isGj == "gj";
        });
        if (state.length > 0) {
          is = true;
        }
      } else {
        is = false;
      }
      gzpData[index].active = is;
      gzpData[index].gjxxArr = state;
    });
    return gzpData;
  }
  stationId = "";
  stationName = "";
  SBID = "";
  SBMC = "";
  PMSID = "";
  GJSJ = "";
  GJNR = "";
  DWID = "";
  GJDJ = "";
  SBCODE = "";
  GLTX_URL = "";
  setCurrentData() {
    let query = this.$route.query || {};
    let stationId: any = query.BDZID;
    let stationName: any = query.BDZMC;
    let SBID: any = query.SBID;
    let PMSID: any = query.PMSID;
    let GJSJ: any = query.GJSJ;
    let GJNR: any = query.GJNR;
    let SBMC: any = query.SBMC;
    let DWID: any = query.DWID;
    let GJDJ: any = query.GJDJ;
    let SBCODE: any = query.SBCODE;
    let GLTX_URL: any = query.GLTX_URL;
    this.stationId = stationId;
    this.stationName = stationName;
    this.SBID = SBID;
    this.PMSID = PMSID;
    this.GJSJ = GJSJ;
    this.GJNR = GJNR;
    this.SBMC = SBMC;
    this.DWID = DWID;
    this.GJDJ = GJDJ;
    this.SBCODE = SBCODE;
    this.GLTX_URL = GLTX_URL;
  }
  showGdpf = false;
  // 派单
  currentRow = [];
  saveend() {
    this.showGdpf = false;
  }
  paidan() {
    this.showGdpf = true;
    this.currentRow = [
      {
        GJSJ: this.GJSJ,
        BDZMC: this.stationName,
        GJNR: this.GJNR,
        BDZID: this.stationId,
        DWID: this.DWID,
        GJDJ: this.GJDJ,
        GLTX_URL: this.GLTX_URL,
      },
    ];
  }
  results: any = {};
  //发起特巡
  fqtx() {
    var zrw = [];
    var lx = "";
    if (
      this.$route.query.PMSID == "b99f66794b8a0c76107499a4a70174b997c8455a15"
    ) {
      zrw = ["15000000010300287757"];
      lx = "4";
    } else {
      zrw = ["15000000010300478538"];
      lx = "3";
    }

    const loading = this.$loading({
      lock: true,
      text: "loading",
      spinner: "el-icon-loading",
      background: "rgba(0,0,0,.7)",
    });
    var params = {
      bdzid: "1500000001",
      bz: "",
      czzt: "xz",
      dq: [],
      lj: "lj",
      rwmc: "220kV天平变电站专项巡检",
      xjlx: "3",
      zq: [],
      zrw: zrw,
    };

    (this as any).$services
      .xzRwSave({
        data: { xzrwParam: params },
        method: "post",
        postparams: true,
      })
      .then((result: any) => {
        console.log(result);
        if (result.data) {
          this.$message({
            type: "success",
            message: "保存成功",
          });
          this.results = result.data;
          var params2 = {
            bdzid: "1500000001",
            bz: "",
            czzt: "xz",
            dq: [],
            lj: result.data.lj,
            rwid: result.data.rwid,
            rwmc: "220kV天平变电站专项巡检",
            xjlx: "3",
            zq: [],
            zrw: zrw,
          };
          (this as any).$services
            .xzrwRwxfButton({
              data: { xzrwParam: params2 },
              method: "post",
              postparams: true,
            })
            .then((result: any) => {
              if (result.data) {
                let form = {
                  page: 1, // 第几页
                  rows: 20, // 每页多少条
                  ssds: "", // 所属地市ID
                  bdzMc: "1500000001", // 变电站ID
                  rwzt: "1", // 任务状态
                  whbz: "", // 维护班组
                  xjlx: "3", // 巡检类型
                };
                console.log(form);
                setTimeout(() => {
                  (this as any).$services
                    .getRwglDetail({ data: form, method: "get" })
                    .then((result: any) => {
                      console.log("result:", result);
                      let data = result.data.rows;
                      var data2 = data.filter((v) => {
                        return v.ZXQKID == this.results.lj;
                      });
                      console.log(data2, 123123);
                      if (data2[0].STATUS == "1") {
                        loading.close();
                        let query = {
                          bdzid: data2[0].BDZID,
                          queryId: data2[0].JHID, //当前列表里的ID
                          xslx: data2[0].XSLX,
                          id: data2[0].ID, //传进来的计划id
                          xsfs: data2[0].XSFS,
                          oldoldrouter: "task",
                        };
                        let search = qs.stringify(query);
                        let url = `/inspectionmonitor/#/jointInspection/inspectionmonitor?${search}`;
                        console.log(url);

                        window.open(url, "_blank");
                        console.log(123);
                      } else {
                        loading.close();
                        if (lx == "4") {
                          window.open(
                            "http://10.192.102.43:28884/inspectionmonitor/#/jointInspection/inspectionmonitor?bdzid=1500000001&queryId=1500000001160791248320201227204405&xslx=3&id=aa15f255-0628-4191-80e0-09505438d3b91&xsfs=0&oldoldrouter=plan",
                            "_blank"
                          );
                        } else {
                          window.open(
                            "http://10.192.102.43:28884/inspectionmonitor/#/jointInspection/inspectionmonitor?bdzid=1500000001&queryId=1500000001160791233920201227183905&xslx=3&id=890b44b8-17f7-45fb-af9e-191c7d18d17d1&xsfs=0&oldoldrouter=plan",
                            "_blank"
                          );
                        }
                      }
                    })
                    .catch((err: object) => {
                      console.log(err);
                    });
                }, 5000);

                this.$message({
                  type: "success",
                  message: `${result.message}`,
                });
              }
            })
            .catch((err: object) => {
              console.log(err);
              this.$message({
                type: "warning",
                message: "下发失败",
              });
              loading.close();
            });
        }
      })
      .catch((err: object) => {
        console.log(err);
        this.$message({
          type: "warning",
          message: "保存失败",
        });
      });
  }
  //发起特巡按钮
  isBtn = false;
  mounted() {
    console.log(this.$route.query);
    if (
      JSON.parse(localStorage.getItem("userinf")).orgValue ==
      "8a1ea5c64bdebad1014bdebc5c21078c"
    ) {
      this.isBtn = true;
    }
    this.fetch(this.$route.query.myId);
    this.setCurrentData();
    this.gzp(this.$route.query.SBID);
  }
}
</script>

<style lang='scss' scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 0.24rem 0.2rem;
  &-top {
    width: 100%;
    // height: 2%;
    // background-color: pink;
    display: flex;
    align-items: center;
    .back {
      width: 0.9rem;
      height: 0.31rem;
      margin-left: auto;
      background-image: url("../../../../assets/img/return.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
      cursor: pointer;
    }
  }
  &-body {
    width: 100%;
    height: 100%;
    padding-top: 0.1rem;
    box-sizing: border-box;
    flex: 1;
    display: flex;
    .left-box {
      width: calc(42% - 0.1rem);
      height: 100%;
      margin-right: 0.1rem;
      .left-box-cont {
        width: 100%;
        height: calc(100% - 0.4rem);
        .left-top {
          width: 100%;
          height: calc(54% - 0.08rem);
          display: flex;
          > div {
            width: 50%;
            height: 100%;
          }
          .left-top-left-cont {
            margin-right: 0.1rem;
          }
        }
        .left-in {
          width: 100%;
          height: calc(23% - 0.1rem);
          margin: 0.1rem 0;
        }
        .left-bottom {
          width: 100%;
          height: calc(23% - 0.1rem);
        }
      }
      .gdpf-btn {
        height: 0.4rem;
        display: flex;
        align-items: center;
        justify-content: center;
        .el-button {
          cursor: pointer;
          padding: 0 0.4rem;
        }
      }
    }

    .right-box {
      width: 58%;
      height: 100%;
      background-color: #ccc;
    }
  }
}
</style>

<style lang="scss" scoped>
.table-query {
  width: 1.4rem;
}
.iframe-container {
  width: 100%;
  height: 80vh;
}
.iframe {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 1;
  opacity: 0.1;
  background: none;
  pointer-events: none;
}
</style>
